<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline='true' style="padding-top:20px" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <!-- <el-form-item label="平台ID" v-show="false">
                    <el-input v-model="searchFilters.id" placeholder="请输入平台ID" ></el-input>
                </el-form-item> -->
                <el-form-item label="BD部门" v-show="false">
                    <el-input v-model="searchFilters.bdName" placeholder="请输入BD部门" ></el-input>
                </el-form-item>
                <el-form-item label="部门编码">
                    <el-input v-model="searchFilters.bdCode" placeholder="请输入部门编码"></el-input>
                  <!-- <el-select clearable placeholder="选择部门编码" v-model="searchFilters.bdCode">
                    <el-option v-for="(item,index) in deptList" :key="index" :label="item.code" :value="item.code"></el-option>
                  </el-select> -->
                </el-form-item>
                <el-form-item label="平台编码">
                    <el-input v-model="searchFilters.code" placeholder="请输入平台编码"></el-input>
                </el-form-item>
                <!-- <el-form-item label="平台简称">
                    <el-input v-model="searchFilters.name" placeholder="请输入平台简称"></el-input>
                </el-form-item> -->
                <el-form-item label="负责人名称">
                    <el-input v-model="searchFilters.chargerName" placeholder="请输入负责人名称"></el-input>
                </el-form-item>
               <!-- <el-form-item label="负责人邮箱">
                    <el-input v-model="searchFilters.chargerEmail" placeholder="请输入负责人邮箱"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话">
                    <el-input v-model="searchFilters.chargerPhone" placeholder="请输入负责人电话"></el-input>
                </el-form-item>
                <el-form-item label="总积分">
                    <el-input v-model="searchFilters.total" placeholder="请输入总积分"></el-input>
                </el-form-item>
                <el-form-item label="可用积分">
                    <el-input v-model="searchFilters.available" placeholder="请输入可用积分"></el-input>
                </el-form-item>
                <el-form-item label="冻结积分">
                    <el-input v-model="searchFilters.frozen" placeholder="请输入冻结积分"></el-input>
                </el-form-item>
                <el-form-item label="用户积分额度">
                    <el-input v-model="searchFilters.userPointLimit" placeholder="请输入旗下用户积分额度值"></el-input>
                </el-form-item>
                <el-form-item label="积分预警值">
                    <el-input v-model="searchFilters.userPointWarning" placeholder="请输入旗下积分预警值"></el-input>
                </el-form-item>
                <el-form-item label="申请人ID">
                    <el-input v-model="searchFilters.applierId" placeholder="请输入申请人ID"></el-input>
                </el-form-item>
                <el-form-item label="申请原因">
                    <el-input v-model="searchFilters.applyReason" placeholder="请输入申请原因"></el-input>
                </el-form-item>
                <el-form-item label="审批ID">
                    <el-input v-model="searchFilters.auditorId" placeholder="请输入审批ID"></el-input>
                </el-form-item>
                <el-form-item label="审批原因">
                    <el-input v-model="searchFilters.auditReason" placeholder="请输入审批原因"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="searchFilters.sts" placeholder="请输入状态"></el-input>
                </el-form-item>-->
                <!-- <el-form-item label="状态">
                  <el-select v-model="searchFilters.sts">
                    <el-option label="待审核" value="0">待审核</el-option>
                    <el-option label="正常" value="1">正常</el-option>
                    <el-option label="冻结" value="2">冻结</el-option>
                  </el-select>
                </el-form-item> -->
                <!-- 搜索区域按钮-查询,重置 -->
                <div class="tool-wrap">
                    <div class="left-area">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                            <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                            <el-button type="primary" size="small" @click="freezeApplicationForm(1)" >冻结申请</el-button>
                            <el-button type="primary" size="small" @click="thawApplicationForm(1)">解冻申请</el-button>
                            <el-button type="primary" size="small" @click="postponeApplyForm(1)">延期申请</el-button>
                            <el-button type="primary" size="small" @click="advanceApplyForm(1)">提前</el-button>
                            <!-- <el-button type="primary" size="small" @click="preAuditForm()">预审核</el-button> -->
                            <el-button type="primary" size="small" @click="auditForm(1)">审核</el-button>
                        </el-button-group>
                    </div>
                </div>
                 <el-tabs v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="已审核" name="first"></el-tab-pane>
                    <el-tab-pane label="预审核" name="second"></el-tab-pane>
                </el-tabs>
                  <!-- 延期申请 -->
                 <el-dialog title="延期申请" :visible.sync="delayApply">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="延期申请日期"  width="100%" prop="endTime">
                        <el-date-picker v-model="form.endTime" type="datetime" style="width: 15rem;"  placeholder="请选择结束日期"></el-date-picker>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="延期申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="delayApply = false">取 消</el-button>
                    <el-button type="primary" @click="postponeApplyForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                  <!-- 提前申请 -->
                <el-dialog title="提前申请" :visible.sync="advanceApply">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="提前申请日期"  width="100%" prop="endTime">
                        <el-date-picker v-model="form.endTime" type="datetime" style="width: 15rem;"  placeholder="请选择结束日期"></el-date-picker>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="提前申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="advanceApply = false">取 消</el-button>
                    <el-button type="primary" @click="advanceApplyForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
              <!-- 冻结申请 -->
                <el-dialog title="冻结申请" :visible.sync="freezeApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="申请状态"  width="100%" prop="sts">
                        <el-select v-model="form.sts" auto-complete="off">
                          <el-option label="流入冻结,流出正常" value="-2"></el-option>
                          <el-option label="双向冻结" value="-3"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="freezeApplication = false">取 消</el-button>
                    <el-button type="primary" @click="freezeApplicationForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
              <!-- 解冻申请  -->
                 <el-dialog title="解冻申请" :visible.sync="thawApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="申请状态"  width="100%" prop="sts">
                        <el-select v-model="form.sts" auto-complete="off">
                         <el-option label="流入正常,流出冻结" value="2"></el-option>
                         <el-option label="启用" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="thawApplication = false">取 消</el-button>
                    <el-button type="primary" @click="thawApplicationForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                   <!-- 审核 -->
                  <el-dialog title="审核" :visible.sync="auditApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="审核状态"  width="100%" prop="auditSts">
                        <el-select v-model="form.auditSts" auto-complete="off">
                            <el-option label="审核通过" value="1">审核通过</el-option>
                            <el-option label="审核拒绝" value="2">审核拒绝</el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="审核原因"  width="100%"  prop="auditReason">
                        <el-input v-model="form.auditReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="auditApplication = false">取 消</el-button>
                    <el-button type="primary" @click="auditForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth=300
                    :tableList="tableList" :tableHeaderList="tableHeaderList"
                    :totalSize="totalSize" :showDetailOperation=true
                    :showEditOperation=true :showBatchDelete=false
                    :showSelection=true :showIndex=false
                    :showDeleteOperation=true @findPage="findPage"
                    @handleDetail="handleDetail" @handleDelete="handleDelete"
                    @handleEdit="handleEdit" @handleSizeChange="handleSizeChange"
                    @handlePageChange="handlePageChange"
                    @selectionChange="selectionChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";

//二.数据输出区
export default {
  //===== 注册组件 =====
  components: {
    jicTable
  },

  //===== 数据初始化区=====
  data() {
    return {
      //===== 公共数据初始化 =====
      selectionChangeList:[],
      deptList:[],
      dialogVisible: false,
      pageIndex: 0, //当前页数：首页；
      pageSize: 10, //每页记录数：10条记录；
      totalSize: 0, //总记录数：返回数据总条数
      pageRequest: {
        pageNum: 1,
        pageSize: 10
      }, // 请求数据的参数
      freezeApplication:false,//冻结申请
      thawApplication:false,//解冻申请
      auditApplication:false,//审核
      delayApply:false,//延期申请
      advanceApply:false,//提前申请
      tableList: [], // 表格列表数据
      searchSize: "mini",
      selsts:null, //标识
      activeName:'first',//默认查询

      //=====表格表头数据=====
      tableHeaderList: [
        // {
        //   prop: "id",
        //   label: "平台ID",
        //   minWidth: 100,
        //   formatter: null
        // },
         {
          prop: "bdName",
          label: "BD部门",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "bdCode",
          label: "BD编码",
          minWidth: 100,
          formatter: null
        },
         {
          prop: "name",
          label: "平台",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "code",
          label: "平台编码",
          minWidth: 100,
          formatter: null
        },

        {
          prop: "total",
          label: "总积分",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "available",
          label: "可用积分",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "frozen",
          label: "冻结积分",
          minWidth: 100,
          formatter: null
        },
      ],

      //=====搜索表单对应的数据对象初始化=====
      searchFilters: {
        id: null,
        deptId: null,
        bdCode: null,
        code: null,
        name: null,
        chargerName: null,
        chargerEmail: null,
        chargerPhone: null,
        total: null,
        available: null,
        frozen: null,
        userPointLimit: null,
        userPointWarning: null,
        applierId: null,
        applyReason: null,
        auditorId: null,
        auditReason: null,
        createTime: null,
        updateTime: null,
        creator: null,
        updater: null,
        deleteFlag: null,
        sts: null,
        bdName:null
      },
      form: {
          id: null,
          sts: null, //
          applyReason: null, //冻结申请原因
          endtime: null,//
          auditSts:null,
          auditReason:null,
        },
       rules: {
          sts: [
            { required: true, message: "请选择状态", trigger: "blur" }
          ],
          applyReason: [
            { required: true, message: "请输入申请原因", trigger: "change" }
          ],
          endTime:[
            {required: true, message: "请选择时间", trigger: "change"}
          ],
          auditSts:[
            {required: true, message: "请选择审核状态", trigger: "change"}
          ],
          auditReason:[
           {required: true, message: "请选择审核原因", trigger: "change"}
          ]

        }
        //dialogVisible: false, //// 是否显示弹窗内容;
        //editDialogVisible1: false,//// 是否可编辑弹窗内容;
        //editLoading: false,////是否显示加载时动画效果;
      };
    },

  //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
  mounted() {
    this.findPage();
    this.getDeptName();
  },

  //=====Vue.js 方法区=====
  methods: {
      /*tabs函数 */
        handleClick(tab, event){
        console.log(tab, event);
        this.findPage();
        },
    //1.查询按钮：查询列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }

      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
          if(this_.activeName == 'second'){
            this_.selsts = 1;
            //申请表查询
              this.utils.request.findConfPlatformApplyPage(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableList = res.data.list;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
          }else{
            this_.selsts = 0;
            //主表查询
             this.utils.request.findConfPlatformPage(this_.searchFilters, function(res) {
                if (res.code === "0000") {
                  this_.tableList = res.data.list;
                  this_.totalSize = Number(res.data.total);
                } else {
                  this_.tableList = [];
                  this_.totalSize = 0;
                }
              });
          }

    },


    getDeptName() {
      let this_ = this
      //let param = this.dataForm;
      this.utils.request.DepartmentNameInquiry({}, function (res) {
        this_.deptList = res.data
        console.log(this_.deptList)
      });
    },

    // 2.重置按钮：无条件查询搜索框条件
    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },

    // 3.详情按钮对应的方法
    handleDetail(params) {
      this.$router.push({
        path: "/ConfPlatformDetail/",
        query: {
          id: params.row.id,
          disabled: true,
          selsts:this.selsts,
          activeName:this.activeName,
        }
      });
    },
    selectionChange(params) {
      this.selectionChangeList = params.selections;
      console.log(this.selectionChangeList)
       for (let i = 0; i < this.selectionChangeList.length; i++) {
        }
    },

    // 4.编辑按钮对应的方法
    handleEdit(params) {
      this.$router.push({
        path: "/ConfPlatformDetail/",
        query: {
          id: params.row.id,
          disabled: false,
          selsts:this.selsts,
          activeName:this.activeName,
        }
      });
    },

    // 5.跳转到新增记录页面；
    addForm(params) {
      params = {
        row: {
          id: null
        }
      };
      this.$router.push({
        path: "/ConfPlatformDetail/",
        query: {
          id: params.row.id,
          disabled: false,
        }
      });
    },
    // 6.每页记录数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },

    // 7.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 8.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 9.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
  //冻结申请
    freezeApplicationForm(num){
      if(num == 1){
          let this_ = this;
          if (this_.selectionChangeList.length < 1) {
            this_.$message({message: "必须选中一条数据", type: "warning"});
            return false;
          }
          this_.form.id = this_.selectionChangeList[0].id;
          this_.freezeApplication = true;
        }else if(num == 2){
          let this_ = this;
          this_.$refs.form.validate(valid => {
            if (valid) {
              this.$confirm("确认提交吗？", "提示", {}).then(() => {
                let this_ = this;
                let params = {};
                if (this_.freezeApplication) {
                  params = Object.assign({}, this.form)
                  this.utils.request.freezeApplicationConfPlat(params, function(res) {
                    if (res.code == "0000") {
                      this_.dataForm = {};
                      this_.findPage(null);
                      this_.freezeApplication = false;
                      this_.$message({ message: "操作成功", type: "success" });
                    } else {
                      this_.$message({
                        message: "操作失败, " + res.msg,
                        type: "error"
                      });
                    }
                  });
                }
              });
            }
          });
        }
    },
  //解冻申请
    thawApplicationForm(num){
      if(num == 1){
          let this_ = this;
          if (this_.selectionChangeList.length < 1) {
            this_.$message({message: "必须选中一条数据", type: "warning"});
            return false;
          }
          this_.form.id = this_.selectionChangeList[0].id;
          this_.thawApplication = true;
        }else if(num == 2){
          let this_ = this;
          this_.$refs.form.validate(valid => {
            if (valid) {
              this.$confirm("确认提交吗？", "提示", {}).then(() => {
                let this_ = this;
                let params = {};
                if (this_.thawApplication) {
                  params = Object.assign({}, this.form)
                  this.utils.request.freezeApplicationConfPlat(params, function(res) {
                    if (res.code == "0000") {
                      this_.dataForm = {};
                      this_.findPage(null);
                      this_.thawApplication = false;
                      this_.$message({ message: "操作成功", type: "success" });
                    } else {
                      this_.$message({
                        message: "操作失败, " + res.msg,
                        type: "error"
                      });
                    }
                  });
                }
              });
            }
          });
        }
    },
  //审核
    auditForm(num){
            if(num == 1){
                let this_ = this;
                if (this_.selectionChangeList.length < 1) {
                    this_.$message({message: "必须选中一条数据", type: "warning"});
                    return false;
                }
                this_.form.id = this_.selectionChangeList[0].id;
                this_.auditApplication = true;
                }else if(num == 2){
                let this_ = this;
                this_.$refs.form.validate(valid => {
                    if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let this_ = this;
                        let params = {};
                        if (this_.auditApplication) {
                        params = Object.assign({}, this.form)
                        this.utils.request.auditAubmitConfPlat(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.auditApplication = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            },
  //延期申请
    postponeApplyForm(num) {
          if(num == 1){
          let this_ = this;
          if (this_.selectionChangeList.length < 1) {
              this_.$message({message: "必须选中一条数据", type: "warning"});
              return false;
          }
          this_.form.id = this_.selectionChangeList[0].id;
          this_.delayApply = true;
          }else if(num == 2){
              debugger
          let this_ = this;
          this_.$refs.form.validate(valid => {
              if (valid) {
              this.$confirm("确认提交吗？", "提示", {}).then(() => {
                  let this_ = this;
                  let params = {};
                  if (this_.delayApply) {
                  params = Object.assign({}, this.form)
                  this.utils.request.postponeApplyConfPlat(params, function(res) {
                      if (res.code == "0000") {
                      this_.dataForm = {};
                      this_.findPage(null);
                      this_.delayApply = false;
                      this_.$message({ message: "操作成功", type: "success" });
                      } else {
                      this_.$message({
                          message: "操作失败, " + res.msg,
                          type: "error"
                      });
                      }
                  });
                  }
              });
              }
          });
          }
      },
  //提前申请
    advanceApplyForm(num) {
                if(num == 1){
                let this_ = this;
                if (this_.selectionChangeList.length < 1) {
                    this_.$message({message: "必须选中一条数据", type: "warning"});
                    return false;
                }
                this_.form.id = this_.selectionChangeList[0].id;
                this_.advanceApply = true;
                }else if(num == 2){
                    debugger
                let this_ = this;
                this_.$refs.form.validate(valid => {
                    if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        let this_ = this;
                        let params = {};
                        if (this_.advanceApply) {
                        params = Object.assign({}, this.form)
                        this.utils.request.advanceApplyConfPlat(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.advanceApply = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            },
    // 10.删除按钮：删除选中的记录
    handleDelete(data) {
      if (this.activeName == 'first') {
        this.utils.request.deleteConfPlatform(
          {
            id: data.row.id
          },
          res => {
            if (res.data) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.findPage();
            } else {
              this.$message({
                message: "删除失败",
                type: "warning"
              });
            }
          }
        );
      }else {
        this.utils.request.deleteConfPlatformApply(
          {
            id: data.row.id
          },
          res => {
            if (res.data) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.findPage();
            } else {
              this.$message({
                message: "删除失败",
                type: "warning"
              });
            }
          }
        );
      }
    }
    //==========Vue.js自定义方法区==========
  }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
